<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			#yellow {
				width: 400px;
				height: 400px;
				background-color: yellow;
			}

			#red {
				width: 200px;
				height: 200px;
				background-color: red;
			}

			#blue {
				width: 100px;
				height: 100px;
				background-color: blue;
			}

			#box {
				width: 200px;
				height: 200px;
				background-color: pink;
			}

		</style>
	</head>
	<body>

		<div id="yellow">
			<div id="red">
				<div id="blue"></div>
			</div>
		</div>

		<a href="http://www.baidu.com">点我啊</a>

		<form action="demo01.html">
			
			用户名: <input type="text" id="user">
			密码: <input type="text" id="pwd">
			<input type="submit" value="提交">
			
		</form>

		<div id="box"></div>
		
	</body>
</html>
<script>
	
	// 事件
	// 设备检测到的用户的行为
	// 事件流: 网页下的事件执行的顺序, 分为冒泡和捕获阶段(IE下只有冒泡)

	// 获取元素
	var yellowDiv = document.getElementById('yellow');
	var redDiv = document.getElementById('red');
	var blueDiv = document.getElementById('blue');

	/*
	yellowDiv.onclick = function() {
		console.log("黄色");
	};

	redDiv.onclick = function() {
		console.log("红色");
	};

	blueDiv.onclick = function(e) {
		console.log("蓝色");

		// 阻止事件继续传递
		// e.stopPropagation();

		// IE下
		// e.cancelBubble = true;
		// 不会阻止事件继续传递
		// return false;
	};

	var a = document.querySelector('a');

	a.onclick = function(e) {	

		alert("点我啊");

		// 阻止网页的默认行为
		e.preventDefault();

		// 可以阻止默认行为, 也可以立即结束该函数
		// return false;

	};

	*/


	// 获取表单元素
	/*
	var form = document.querySelector('form');
	var userInput = document.getElementById('user');
	var pwdInput = document.getElementById('pwd');

	form.onsubmit = function(e) {

		if (!userInput.value) {
			alert("用户名不能为空");
			userInput.focus();
			return false;
		}

		if (!pwdInput.value) {
			alert("密码不能为空");
			pwdInput.focus();
			return false;
		}


	};

	*/


	// 第一个参数: eventType, 事件类型
	// 第二个参数: 回调函数
	// 第三个参数: 事件触发阶段 true为捕获, false为冒泡, 默认为false, 先捕获后冒泡
	// 冒泡阶段: 小范围->大范围传递
	// 捕获阶段: 大范围->小范围传递


	// yellowDiv.onclick = function() {
	// 	console.log(111);
	// };
	// // 后面事件会覆盖前面事件
	// yellowDiv.onclick = function() {
	// 	console.log(222);
	// };

	yellowDiv.addEventListener('click', function(e) {
		// 事件类型
		console.log(e.type);
		console.log("黄色1");
	});

	yellowDiv.addEventListener('click', function() {
		console.log("黄色2");
	}, true);

	redDiv.addEventListener('click', function() {
		console.log("红色");
	});

	

	redDiv.addEventListener('click', function() {
		console.log("红色1");
	}, true);

	blueDiv.addEventListener('click', function() {
		console.log("蓝色");
	});

	blueDiv.addEventListener('click', function() {
		console.log("蓝色1");
	}, true);

	// 获取元素
	var boxDiv = document.getElementById('box');


	boxDiv.addEventListener('click', test, false);

	// 移除事件监听 三个参数必须一致
	boxDiv.removeEventListener('click', test, false);

	function test() {
		console.log(111);
	}

	// IE下
	// 添加事件
	// attachEvent
	// boxDiv.attachEvent('click', test);
	// 移除事件
	// boxDiv.detachEvent('click', test);


	// 定义一个兼容IE添加事件的函数
	function addEvent(obj, eventType, func, bubble) {
		bubble = bubble === true ? true : false;
		if (obj.addEventListener) {
			obj.addEventListener(eventType, func, bubble);
		} else {
			obj.attachEvent(eventType, func);
		}
	}

	addEvent(boxDiv, 'mousemove', function() {
		console.log(666);
	});


	











</script>

